<template>
  <view>
    <!-- <Curtain v-model="showContent" :catch-move="true" /> -->
    <u-popup
      :show="showAttr"
      round="10"
      mode="bottom"
      :closeable="true"
      @close="close"
      @open="open"
    >
      <view class="contentss">
        <view class="baseinfo">
          <view class="base-img">
            <!-- <u-image
              :src="goodsInfo.coverUrl"
              width="100px"
              height="100px"
            ></u-image> -->
            <img
              :src="goodsInfo.coverUrl"
              alt=""
              class="pic"
              mode="aspectFit"
            />
          </view>
          <view class="base-attr">
            <view class="price-info items-baseline">
              <view class="new-price items-baseline"
                >￥<span class="tian">{{ rentPrice }}</span>
                <span class="tian">{{ goodsInfo.minimumRentPrice }}</span>
                /天起</view
              >
              <!-- <span class="total">库存{{specItem.stock}}件</span> -->
            </view>
            <view class="text" v-if="meal == 0">请选择：套餐；租期；</view>
            <view class="text" v-if="meal == 1">已选择：套餐；七天</view>
            <view class="text" v-if="meal == 2"
              >已选择：<span>{{ mealname }}</span
              >自定义36天</view
            >
            <!-- <view class="text">月租：￥{{ monthRent }}</view>
            <view class="text">总租金：￥{{ allRent }}</view>
            <view class="text">买断价格：￥{{ buyoutRent }}</view> -->
          </view>
        </view>
        <view class="select flex-col">
          <view class="label-name">套餐</view>
          <view class="list flex-row">
            <!-- <span class="item"
              >I5-6200U-8G-256G固 态-930M-2G独显-LOLI5-6200U-8G-256G固
              态-930M-2G独显-LOL</span
            > -->
            <view
              class="item"
              :class="{ selectItem: currentSpec == index }"
              v-for="(spec, index) in specList"
              :key="index"
              @tap="changeSpec(spec, index)"
            >
              {{ spec.specName }}
            </view>
          </view>
        </view>
        <div class="lease-date flex-col">
          <span class="label-name">租期</span>
          <div class="list flex-row">
            <view
              class="item"
              :class="{ selectItem: index == currentDay }"
              v-for="(day, index) in rentDays"
              :key="`day${index}`"
              @tap="currentDay = index"
              >{{ day.day }}天</view
            >
            <div class="item" :class="{ selectItem: currentDay === -1 }">
              <input
                type="number"
                class="input"
                placeholder="自定义"
                v-model.trim.number="diyDate"
                @focus="handleCalendar"
                @blur="
                  diyDate =
                    diyDate > rentDays[0].day ? diyDate : rentDays[0].day
                "
                placeholderStyle="font-size: 0.28rem;"
              />
            </div>
          </div>
        </div>
        <div class="lease-num flex-row">
          <div class="label-name items-center">
            租赁数量<span class="all-count">库存{{ specItem.stock }}件</span>
          </div>
          <div class="num-input-box flex-row">
            <view class="text" @tap="num > 1 ? (num -= 1) : 1">-</view>
            <input
              type="number"
              class="input"
              v-model="num"
              @blur="num = num <= specItem.stock ? num : specItem.stock"
            />
            <view
              class="text"
              @tap="num < specItem.stock ? (num += 1) : specItem.stock"
              >+</view
            >
          </div>
        </div>
        <view class="safe-serve flex-col">
          <view class="label-name items-center" @tap="showService"
            >安心服务(多选)<img
              src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/goodsDetail/icon-q.png"
              alt=""
              class="icon-s"
          /></view>
          <view class="list flex-col">
            <view
              class="item items-center"
              :class="{ selectItem: selectServiceIds.includes(item.id) }"
              v-for="(item, index) in goodsInfo.addServiceDTOList"
              :key="`service${index}`"
              @tap="chooseService(item)"
            >
              {{ item.addServiceName }} | ￥{{ item.addServicePrice }}
            </view>
          </view>
        </view>
        <view class="btns submit-btn" @tap="goOrderInfo">确认</view>
      </view>
    </u-popup>
    <view>
      <u-modal :show="serveShow" :title="title">
        <view class="servetitle"
          >默认送鼠标不需要付费，有需要电脑包的可以加<span class="seveprice"
            >10</span
          >元。</view
        >
        <u-button
          type="primary"
          slot="confirmButton"
          shape="circle"
          @click="serveShow = false"
          text="我知道了"
        ></u-button>
      </u-modal>
    </view>
    <calendar :calendarShow="calendarShow" />
    <!-- <SafeServe v-model="showSafe"/> -->
  </view>
</template>
<script>
import calendar from "./calendar.vue";
// import SafeServe from './safeServe'
// import Login from "@utils/login";
export default {
  components: { calendar },
  // components: { SafeServe },
  model: {
    prop: "showContent",
    event: "changeShow",
  },
  props: {
    showAttr: {
      type: Boolean,
      default: false,
    },
    goodsInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      showContent: false,
      showSafe: false,
      currentSpec: 100,
      currentDay: 100,
      days: [1, 3, 7, 30, 60, 90, 180, 360, 720, 1080],
      num: 1, // 数量
      diyDate: "",
      selectServices: [],
      meal: 0, //套餐状态
      mealname: "", //套餐名称
      serveShow: false, //安心服务弹窗
      title: "电脑包（需要归还)",
      calendarShow: false, //自定义租期
    };
  },
  computed: {
    specList() {
      console.log(this.goodsInfo, this.goodsInfo.goodsSpecDTOList, "5555555");
      if (this.goodsInfo.goodsSpecDTOList.length >= 1) {
        return this.goodsInfo.goodsSpecDTOList;
      }
    },
    specItem() {
      console.log(this.specList, "\\");
      if (this.specList) {
        return this.specList[this.currentSpec];
      }
    },
    rentDays() {
      // 租期
      let rentDays = [];
      this.days.forEach((day) => {
        if (this.specItem && this.specItem[`rent${day}day`]) {
          rentDays.push({
            day: day,
            value: this.specItem[`rent${day}day`],
          });
        }
      });
      return rentDays;
    },
    selectData() {
      let index = this.currentDay;
      if (index < 0) {
        if (this.diyDate < this.rentDays[0].day) {
          index = 0;
        } else {
          index = this.rentDays.findIndex(
            (item, idx) =>
              this.diyDate >= item.day &&
              (this.rentDays[idx + 1]
                ? this.diyDate < this.rentDays[idx + 1].day
                : true)
          );
        }
      }
      return index;
    },
    rentPrice() {
      console.log(this.rentDays, ",,");
      if (this.rentDays.length >= 1) {
        return this.rentDays[this.selectData].value;
      }
    },
    dayoutDays() {
      // 买断日期
      let dayoutDays = [];
      this.days.forEach((day) => {
        if (
          this.specItem &&
          typeof this.specItem[`buyout${day}day`] !== "undefined"
        ) {
          dayoutDays.push({
            day: day,
            value: this.specItem[`buyout${day}day`],
          });
        }
      });
      return dayoutDays;
    },
    monthRent() {
      // 月租
      return (this.rentPrice * 30 * this.num).toFixed(2);
    },
    allRent() {
      // 总租
      if (this.rentDays.length != 0) {
        return (
          this.rentDays &&
          this.rentDays[this.selectData].value *
            (this.currentDay >= 0
              ? this.rentDays && this.rentDays[this.selectData].day
              : this.diyDate) *
            this.num
        ).toFixed(2);
      }
    },
    buyoutRent() {
      // 买断
      if (this.dayoutDays.lenght >= 1) {
        return this.dayoutDays[this.selectData].value;
      }
    },
    selectServiceIds() {
      return this.selectServices.map((item) => item.id);
    },
  },
  watch: {
    showContent(value) {
      if (!value) {
        this.$emit("changeShow", value);
      }
    },
  },

  methods: {
    open() {
      // console.log("open");
    },
    close() {
      // 关闭弹窗
      // this.$emit('update:showAttr', false)
      this.$parent.showAttr = false;
      // console.log("close");
    },
    //自定义租期
    handleCalendar() {
      this.calendarShow = true;
      console.log("calendar");
    },
    //安心服务弹窗
    showService() {
      this.serveShow = true;
      console.log("sssssss");
      // const [info] = this.goodsInfo.addServiceDTOList;
      // this.$taro.showModal({
      //   title: info.addServiceName,
      //   content: info.addServiceContext,
      //   showCancel: false,
      // });
    },
    chooseService(data) {
      if (this.selectServices.find((item) => item.id === data.id)) {
        this.selectServices = this.selectServices.filter(
          (item) => item.id !== data.id
        );
      } else {
        this.selectServices.push(data);
      }
    },
    goOrderInfo() {
      //判断登录状态
      // const sessionId = this.$taro.getStorageSync("sessionId");
      // if (!sessionId) {
      //   Login.toLogin();
      // }
      // const data = {
      //   goodsInfo: this.goodsInfo,
      //   num: this.num,
      //   goodsId: this.goodsInfo.id,
      //   // addServiceNums: 1,
      //   addServiceIds: this.selectServiceIds.toString(),
      //   addServices: this.selectServices,
      //   specId: this.specItem.id,
      //   rentDay:
      //     this.currentDay >= 0
      //       ? this.rentDays[this.currentDay].day
      //       : this.diyDate,
      // };
      // this.$store.dispatch("order/setOrderInfo", {
      //   id: this.goodsInfo.id,
      //   data,
      // });
      uni.navigateTo({ url: "/pages/comfirmOrder/index" });
      console.log("确认");
      // this.$goPage(`/pages/comfirmOrder/index?id=${this.goodsInfo.id}`, true);
    },
    changeSpec(val, index) {
      this.mealname = val.specName;
      console.log(val, this.mealname, index, "9999");
      console.log(index, "]]]]]]");
      this.currentSpec = index;
      this.meal = 2;
      this.currentDay = 0;
    },
    handletao() {
      console.log("pppppppppppppp");
    },
  },
};
</script>
<style lang="scss">
.servetitle {
  width: 231px;
  height: 55px;
  line-height: 33px;
  text-align: center;
  font-family: PingFang SC Medium;
  font-size: 14px;
  .seveprice {
    color: #157afe;
  }
}
.contentss {
  width: 100vw;
  max-height: 100vh;
  padding: 15px;
  margin-bottom: 50px;
  // max-height: 500px;
  // overflow-y: scroll;
  // overflow-x: hidden;
  // z-index: 1000;
  .baseinfo {
    width: 100%;
    height: 100px;
    // background-color: rgb(189, 101, 101);
    display: flex;
    .base-img {
      width: 100px;
      height: 100px;
      .pic {
        width: 100px;
        height: 100px;
        object-fit: contain;
      }
    }
    .base-attr {
      margin-left: 13px;
      .price-info {
        .new-price {
          font-size: 14px;
          color: #ff5426;
          line-height: 29px;
          .tian {
            font-size: 18px;
          }
        }
        .total {
          margin-left: 12px;
          font-size: 14px;
          color: #999999;
        }
      }
      .text {
        width: 65vw;
        font-size: 12px;
        color: #9d9d99;
        line-height: 18px;
      }
    }
  }
  .label-name {
    font-size: 15px;
    color: #3d3d3d;
    font-family: PingFang SC Bold;
    .icon-s {
      width: 14px;
      height: 14px;
    }
    .all-count {
      color: #9d9d99;
      font-size: 12px;
      margin-left: 11px;
    }
  }
  .select {
    margin-top: 16px;
    .list {
      flex-wrap: wrap;
      .item {
        height: 30px;
        // border: 1px solid #707070;
        border-radius: 22px;
        padding: 0 12px;
        text-align: center;
        line-height: 32px;
        margin-top: 15px;
        min-width: 50px;
        color: #555;
        margin-right: 4px;
        font-size: 12px;
        background-color: #f3f3f3;
        letter-spacing: 0em;
        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;
        &.selectItem {
          color: #157afe;
          background-color: rgba(21, 122, 254, 0.1);
          border: 1px solid #157afe;
        }
      }
    }
  }
  .lease-date {
    margin-top: 15px;
    .list {
      margin-top: 9px;
      width: 100%;
      flex-wrap: wrap;
      .item {
        min-width: 58px;
        width: 58px;
        height: 30px;
        line-height: 32px;
        text-align: center;
        margin-right: 8px;
        border-radius: 15px;
        background-color: #f5f5f5;
        margin-bottom: 10px;
        box-sizing: border-box;
        &.selectItem {
          background-color: #eef8ff;
          border: 1px solid #0096ff;
          color: #0096ff;
        }
        .input {
          max-width: 58px;
          height: 30px;
          line-height: 32px;
          text-align: center;
        }
        // &.input {
        //   border: 0!important;
        //   &.selectItem {
        //     box-shadow: 0 0 2px #0096FF;
        //   }
        // }
      }
    }
  }
  .lease-num {
    margin-top: 18px;
    .num-input-box {
      margin-left: auto;
      border: 1px solid #707070;
      .input {
        height: 22.5px;
        min-width: 36px;
        width: 36px;
        padding: 0 5px;
        font-size: 15px;
        font-weight: bold;
        color: #000000;
        line-height: 19px;
        text-align: center;
        box-sizing: border-box;
        // border-top: 1px solid #707070;
        // border-bottom: 1px solid #707070;
      }
      .text {
        height: 22.5px;
        width: 22.5px;
        // border: 1px solid #707070;
        // box-shadow: 0 0 1px #707070;
        line-height: 24.5px;
        text-align: center;
        font-size: 14px;
        color: #222;
        &:first-child {
          border-right: 1px solid #707070;
        }
        &:last-child {
          border-left: 1px solid #707070;
        }
      }
    }
  }
  .safe-serve {
    margin-top: 17px;
    .list {
      margin-top: 9px;
      .item {
        margin-bottom: 5px;
        height: 30px;
        line-height: 32px;
        min-width: 50px;
        text-align: center;
        background-color: #fff;
        border-radius: 15px;
        background-color: #f5f5f5;
        font-size: 14px;
        padding: 0 10px;
        margin-right: 10px;
        &.selectItem {
          background-color: #0097ff;
          border: 1px solid #0097ff;
          color: #fff;
        }
        &.last-child {
          margin-right: 0;
        }
      }
    }
  }
  .btns {
    width: 92%;
    position: fixed;
    bottom: 9px;
    left: 15px;
  }
}
</style>
